<template>
  <el-card shadow="always" style="width: 95%;">
  <!--    1. 查询条件-->
    <el-form :inline="true" :model="studentSearch" class="demo-form-inline" size="medium">
      <el-form-item >
        <el-input v-model="studentSearch.sname" placeholder="学生姓名"></el-input>
      </el-form-item>
      <el-form-item >
        <el-input v-model="studentSearch.addr" placeholder="学生住址"></el-input>
      </el-form-item>
      <el-form-item >
        <el-select v-model="studentSearch.cid" placeholder="所在班级">
          <el-option label="所有班级" value="0"></el-option>
          <el-option :label="c.cname" :value="c.cid" v-for="c in classes"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search" icon="el-icon-search" plain>查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="add" icon="el-icon-plus" plain>添加</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" @click="handleDelete" icon="el-icon-delete" plain>批量删除</el-button>
      </el-form-item>
    </el-form>
  <el-table
          :data="students"
          @selection-change="handleSelectionChange"
          style="width: 100%">
    <el-table-column
            type="selection"
            width="55">
    </el-table-column>
    <el-table-column
            label="学号"
            prop="sid"
            align="center"
            width="180"/>
    <el-table-column
            label="姓名"
            prop="sname"
            align="center" />
    <el-table-column
            label="性别"
            prop="sex"
            align="center" />
    <el-table-column
            label="年龄"
            prop="age"
            align="center" />
    <el-table-column
            label="住址"
            prop="addr"
            align="center" />
    <el-table-column
            label="所在班级"
            prop="cname"
            align="center" />
    <el-table-column label="操作" align="center">
      <template slot-scope="scope">
        <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
<!--    3. 分页导航-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
<!--    4. 添加或修改的对话框-->
    <el-dialog :title="student.sid ? '修改学生' : '添加学生'"
               :visible.sync="dialogFormVisible"
               :close-on-click-modal="false">
      {{student}}
      <el-form :model="student">
        <el-form-item label="学生姓名" :label-width="formLabelWidth">
          <el-input v-model="student.sname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学生性别" :label-width="formLabelWidth">
          <el-radio v-model="student.sex" label="男">男</el-radio>
          <el-radio v-model="student.sex" label="女">女</el-radio>
        </el-form-item>
        <el-form-item label="学生年龄" :label-width="formLabelWidth">
          <el-input v-model="student.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学生住址" :label-width="formLabelWidth">
          <el-input v-model="student.addr" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所在班级" :label-width="formLabelWidth">
          <el-select v-model="student.cid" placeholder="请选择所在班级">
            <el-option :label="c.cname" :value="c.cid" v-for="c in classes"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
  export default {
    data() {
      return {
        students: [],
        page: 1,          // 当前页
        pageSize: 5,      // 每页大小
        total: 100,       // 总记录数
        studentSearch:{}, // 查询条件对象
        classes:[],       // 所有班级集合
        student:{},       // 要添加或修改的学生
        dialogFormVisible: false,   // 对话框显示或隐藏，默认隐藏false
        formLabelWidth: '100px',    // 对话框前的提示文本的宽度
        multipleSelection:[],       // 存放多选的学生对象
        sids:[],                    // 代表删除的学生的编号，有可能是一个也可能是批量
      }
    },
    created() {
      //1. 查询所有学生列表
      // this.findAllStudents()
      //2. 分页查询
      // this.findByPage()
      //3. 查询出班级列表
      this.findClasses()
      //4. 条件查询带分页
      this.search()
    },
    methods: {
      //1. 查询所有学生
      findAllStudents(){
        this.$axios.get("/student/list.do").then(({data}) => {
          this.students = data.data
        })
      },
      //2. 进行分页查询
      findByPage(){
        this.$axios.get(`/student/findByPage.do?page=${this.page}&pageSize=${this.pageSize}`).then(({data}) => {
          this.students = data.data.rows
          this.total = data.data.total
        })
      },
      //3. 查询所有班级列表
      findClasses(){
        this.$axios.get("/classes/list.do").then(({data}) => {
          this.classes = data.data
        })
      },
      //4. 条件查询带分页
      search(){
        this.$axios.post(`/student/search.do?page=${this.page}&pageSize=${this.pageSize}`,this.studentSearch)
                .then(({data}) => {
          this.students = data.data.rows
          this.total = data.data.total
        })
      },
      //5. 添加学生(点击“添加”按钮)
      add(){
        //5.1 清空原来表单数据
        this.student = {}
        //5.2 显示对话框
        this.dialogFormVisible = true
      },
      //6. 保存学生
      save(){
        //6.1 保存学生
        this.$axios.post(`${this.student.sid ? '/student/update.do' : '/student/add.do'}`,this.student)
            .then(({data}) => {
              console.log("data:",data)
              if(data.code == 200){
                const _this = this
                this.$message({
                  message: data.msg,
                  type: 'success',
                  onClose(){    // 信息框消失时，触发此事件
                    // 关闭对话框
                    _this.dialogFormVisible = false
                    // 刷新页面
                    _this.search()
                  }
                });
              }
            })
      },
      //7. 修改学生
      handleEdit(index, row) {
        //7.1 为对话框绑定的变量赋值
        this.student = row
        //7.2 打印对话框
        this.dialogFormVisible = true
      },
      //8. 批量删除或单个删除学生
      handleDelete(index, row) {  // row：只要有值，证明删除的是单个学生，否则，就是删除多个（批量删除）
        console.log(index, row);
        //8.1 确定要要删除的学生编号的数组
        if(row){
          this.sids = [row.sid]
        }else{
          this.sids = this.multipleSelection.map(m => m.sid)
        }
       //8.2 使用“确认框”删除学生
        this.$confirm(`是否真的要删除学生编号为${this.sids}?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {     // 点击了“确定”按钮后的处理逻辑
          this.$axios.get(`/student/delete2.do?sids=${this.sids}`).then(({data}) => {
            if(data.code == 200){
              const _this = this
              this.$message({
                type: 'success',
                message: data.msg,
                onClose(){
                  _this.search()
                }
              });
            }
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //8. 多选时触发的事件
      handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log("选中的学生为：",this.multipleSelection)
      },
      // 页大小pageSize改变时触发
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val
        this.search()
      },
      // 当前页page改变时触发
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.page = val
        this.search()
      }
    }
  }
</script>

<style>
  .el-card{
    margin: 0 auto;
  }
  .el-pagination{
    margin-top: 20px;
    text-align: right;
  }
</style>